import {
  Flex,
  ListItem,
  Text,
  UnorderedList,
  Button,
  Tooltip,
} from '@chakra-ui/react';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import { memo } from 'react';

export default function InvokeButton({
  handleInvoke,
}: {
  handleInvoke: () => void;
}) {
  const { isReady, isProcessing } = useIsReadyToInvoke();

  return (
    <Flex position="relative" justify="center">
      <Tooltip
        label={isReady ? undefined : <InvokeButtonTooltipContent />}
        hasArrow={false}
      >
        <Button
          minW="12rem"
          variant="outline"
          rounded="none"
          borderColor="brand.700"
          color="brand.700"
          onClick={handleInvoke}
          isLoading={isProcessing}
          _hover={{ color: 'brand.50', bg: 'brand.700' }}
          boxShadow="lg"
          _disabled={{
            color: 'brand.300',
            borderColor: 'brand.300',
            cursor: 'not-allowed',
            _hover: { color: 'brand.300', bg: 'transparent' },
          }}
          h={{ base: 10, '1080p': 12, '2k': 16, '4k': 24 }}
          isDisabled={!isReady}
          px={{ base: 6, '2xl': 10, '1080p': 16, '2k': 20, '4k': 24 }}
        >
          <Flex flexDir="column">
            <Text
              fontSize={{
                base: 'md',
                '1080p': 'lg',
                '2k': '2xl',
                '4k': '4xl',
              }}
            >
              Generate
            </Text>
            <Text
              fontSize={{
                base: 'xs',
                '1080p': 'md',
                '2k': 'xl',
                '4k': '3xl',
              }}
            >
              生成
            </Text>
          </Flex>
        </Button>
      </Tooltip>
    </Flex>
  );
}

export const InvokeButtonTooltipContent = memo(() => {
  const { isReady, reasons } = useIsReadyToInvoke();

  if (isReady) {
    return null;
  }
  return (
    <Flex flexDir="column" gap={1}>
      <Text fontWeight={600}>无法绘画</Text>
      {reasons.length > 0 && (
        <UnorderedList>
          {reasons.map((reason, i) => (
            <ListItem key={`${reason}.${i}`}>
              <Text fontWeight={400}>{reason}</Text>
            </ListItem>
          ))}
        </UnorderedList>
      )}
    </Flex>
  );
});

InvokeButtonTooltipContent.displayName = 'InvokeButtonTooltipContent';
